/***************************************************************************
*   Copyright (C) 2011 by Chuck Gao & Alex Liu                             *
*                                                                          *
*   This program is free software: you can redistribute it and/or modify   *
*   it under the terms of the GNU General Public License as published by   *
*   the Free Software Foundation, either version 3 of the License, or      *
*   (at your option) any later version.                                    *
*                                                                          *
*   This program is distributed in the hope that it will be useful,        *
*   but WITHOUT ANY WARRANTY; without even the implied warranty of         *
*   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the          *
*   GNU General Public License for more details.                           *
*                                                                          *
*   You should have received a copy of the GNU General Public License      *
*   along with this program.  If not, see <http://www.gnu.org/licenses/>.  *
*                                                                          *
*   Contact author: chuckgao.cg@gmail.com                                  *
*                   alex2202375@gmail.com                                  *
***************************************************************************/

import QtQuick 1.0
import com.nokia.symbian 1.1
import Qt.labs.components 1.1

Item {
    id: cookingHelper
    width: 640
    height: 360
    clip: true

    property real btnOpacity: 0.6
    property int imageListViewWidth: 260
    property int stepTextViewWidth: cookingHelper.width - imageListViewWidth

    function gotoNextStep() {
        stepContent.text = "打酱油！"
    }

    Component.onCompleted: {
        imageListView.visible = false
    }

    // Cooking step demonstration area

    ListModel {
        id: testModel
        ListElement { name: "" }
        ListElement { name: "" }
        ListElement { name: "" }
    }

    Row {
        width: parent.width
        height: parent.height

        // Cooking step image(s) listview
        ListView {
            id: imageListView
            width: visible ? imageListViewWidth : 0
            height: visible ? cookingHelper.height : 0
            clip: true
            model: testModel
            delegate: Image {
                width: imageListView.width
                height: imageListView.height
                smooth: true
                source: "qrc:/Images/kungpao.jpg"
            }
        }

        TextArea {
            id: stepContent
            width: imageListView.visible ? stepTextViewWidth : cookingHelper.width
            height: cookingHelper.height
            platformMaxImplicitWidth: imageListView.visible ? stepTextViewWidth : cookingHelper.width
            font.family: "Freestyle Script"
            font.pointSize: 32
            //                    color: "white"
            wrapMode: TextEdit.Wrap
            readOnly: true
            text: "先用一个蛋白、盐半茶匙及太白粉2大匙搅拌均匀，调成“腌料”备用。再用酱油1大匙、米酒1茶匙、太白粉水1大匙、糖1/2茶匙、盐1/4茶匙、酱色及白醋1茶匙、麻油2大匙、蒜末1/2茶匙调拌均匀，调成“综合调味料”"
        }
    }

    // Helper btns
    Image {
        anchors.left: parent.left
        anchors.leftMargin: 4
        anchors.verticalCenter: parent.verticalCenter
        opacity: btnOpacity
        smooth: true
        source: "qrc:/helper/Images/CookingHelper/previous.png"
    }

    Image {
        anchors.right: parent.right
        anchors.rightMargin: 4
        anchors.verticalCenter: parent.verticalCenter
        opacity: btnOpacity
        smooth: true
        source: "qrc:/helper/Images/CookingHelper/next.png"

        MouseArea {
            anchors.fill: parent
            onClicked: {
                myQueryDialog.visible = true
            }
        }
    }


    // Bottom toolbar
    Image {
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 2
        anchors.right: btn2.left
        smooth: true
        source: "qrc:/helper/Images/CookingHelper/1.png"

        MouseArea {
            anchors.fill: parent
            onClicked: {
                imageListView.visible = ( imageListView.visible ? false : true )
            }
        }
    }

    Image {
        id: btn2
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 2
        anchors.horizontalCenter: parent.horizontalCenter
        smooth: true
        source: "qrc:/helper/Images/CookingHelper/2.png"
    }

    Image {
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 2
        anchors.left: btn2.right
        smooth: true
        source: "qrc:/helper/Images/CookingHelper/3.png"
    }

    // Query dialogs
    HelperQueryDialog {
        id: myQueryDialog
        visible: false

        anchors.centerIn: parent
    }
}
